<template>
	<view>
		<view class="item">
			<text>头像：</text>
			<image :src="logo" class="thumb" @tap="chooseImage" mode="aspectFill"></image>
		</view>
		<view class="item">
			<text>昵称</text>
			<input type="text" v-model="data.nickname" class="input">
		</view>
		<button class="edit" @click="save">修改</button>
	</view>
</template>

<script>
	// 引入API
	import { saveUserInfo } from '@/api/user.js';
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		data() {
			return {
				userInfo: {},
				data: {
					logo: '',
					nickname: '',
					birthday: '1900-01-01',
				},
				logo: '',
				image: [],
				sourceTypeIndex: 2,
				sizeTypeIndex: 2,
			}
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			getUserInfo(){
				this.userInfo = uni.getStorageSync('userinfo');
				if (this.userInfo.logo.length == 0) {
					this.logo = this.$_config.FILE_HOST+'/uploads/owner/def/default.png';
				} else {
					this.logo = this.$_config.FILE_HOST+'/'+this.userInfo.logo;
					this.data.logo = this.userInfo.logo;
				}
				this.data.nickname = this.userInfo.nickname;
			},
			chooseImage: async function() {
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: 1,
					success: (res) => {
						this.image = res.tempFilePaths;
						this.logo = this.image[0];
					},
					fail: (err) => {

					}
				})
			},
			save(){
				saveUserInfo(this.data).then(r => {
					if (r.data.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon : 'none',
						});
						this.userInfo.nickname = this.data.nickname;
						uni.setStorageSync("userinfo", this.userInfo);
					} else {
						uni.showToast({
							title: r.data.msg,
							icon : 'none',
						});
					}
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style>
	.item {
		display: flex;
		height: 110rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		border-bottom: 1px solid #EFEFEF;
	}
	.thumb {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}
	.input {
		width: 80%;
		height: 100%;
		text-align: right;
	}
	.edit {
		width: 90%;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		background-color: #19BE6B;
		color: #FFFFFF;
	}
</style>
